<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>

</head>
<div th:replace="common/Header :: header"></div>
<div id="Content">
    <div id="BackLink">
        <a th:href="@{/catalog/main}">Return to Main Menu</a>
    </div>

    <div id="Catalog">


        <div id="Cart">
            <script>
                $(function (){
                    $('.quantity').each(function (){
                        $(this).on('blur',function (){
                            console.log(this.value+this.name);
                            var certainItem = this.name;
                            var certainItemQuantity = this.value;
                            $.ajax({
                                type		: "GET",
                                url			: "/cart/itemQuantity?ItemID="+this.name+"&&ItemQuantity="+this.value,
                                success		: function (data){
                                    console.log(data);
                                    if(data === 'Different'){
                                        if(confirm("Are you sure to change the quantity?")){
                                            $.ajax({
                                                type		: "GET",
                                                url			: "/cart/setQuantity?ItemID="+certainItem+"&&ItemQuantity="+certainItemQuantity,
                                                error:function (e) {
                                                    //返回500错误 或者其他 http状态码错误时 需要在error 回调函数中处理了 并且返回的数据还不能直接alert，需要使用
                                                    //$.parseJSON 进行转译    res.msg 是自己组装的错误信息通用变量
                                                    var res = $.parseJSON(e.responseText);
                                                    layer.msg(res.msg);
                                                },
                                                success		: function (data){
                                                    console.log(data);
                                                    var certainItem1 ="#"+certainItem;
                                                    $(certainItem1).text("$"+data);
                                                    //修改总价
                                                }
                                            })
                                        }else{
                                            console.log(1);
                                            $.ajax({
                                                type		: "GET",
                                                url			: "resetQuantity?ItemID="+certainItem,
                                                error:function (e) {
                                                    //返回500错误 或者其他 http状态码错误时 需要在error 回调函数中处理了 并且返回的数据还不能直接alert，需要使用
                                                    //$.parseJSON 进行转译    res.msg 是自己组装的错误信息通用变量
                                                    var res = $.parseJSON(e.responseText);
                                                    layer.msg(res.msg);
                                                },
                                                success		: function (data){
                                                    console.log(data);
                                                    var certainItem2 = certainItem + "A";
                                                    console.log(certainItem2);
                                                    var certainItem3 ="#"+certainItem2;
                                                    console.log(certainItem3);
                                                    $(certainItem3).val(data);
                                                }
                                            })
                                        }
                                    }
                                }
                            });
                        })
                    })
                })
            </script>
            <h2>Shopping Cart</h2>
            <form id="update" method="post">
<!--               action="updateCartQuantities" 这个被我删掉了 因为在修改数量的时候回车会直接进入url:updateCartQuantities,但是后面不带参数-->
                <table>
                    <tr>
                        <th><b>Item ID</b></th>
                        <th><b>Product ID</b></th>
                        <th><b>Description</b></th>
                        <th><b>In Stock?</b></th>
                        <th><b>Quantity</b></th>
                        <th><b>List Price</b></th>
                        <th><b>Total Cost</b></th>
                        <th>&nbsp;</th>
                    </tr>


                        <tr th:if="${session.cart.numberOfCartItems == 0}">
                            <td colspan="8"><b>Your cart is empty.</b></td>
                        </tr>
<!--                    <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}" varStatus="st">-->
                        <tr th:each="cartItem:${session.cart.cartItems}">
                            <td>
                                <a th:href="@{/item/ViewItem(itemId=${cartItem.item.itemId})}" th:text="${cartItem.item.itemId}">ItemId</a>
                            </td>
                            <td th:text="${cartItem.item.product.productId}"></td>
                            <td th:text="${cartItem.item.attribute1}+' '+${cartItem.item.product.name}">
                            </td>
                            <td th:text="${cartItem.inStock}">inStock </td>
                            <td>
                                <input th:type="text" th:class="'quantity'" th:id="${cartItem.item.itemId}+'A'" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}" />
<!--                                不能用ItemId,虽然都是不一样的,但是ID Class等等属性要求不能有空格,ItemId会带一点非法的东西,很坑,还是用下标好-->
                            </td>
                            <td>
                                <fmt:formatNumber th:text="'$'+${cartItem.item.listPrice}" pattern="$#,##0.00"/>
                            </td>
                            <td>

                                <fmt:formatNumber th:id="${cartItem.item.itemId}" th:text="'$'+${cartItem.cartItemTotal}" pattern="$#,##0.00"/>
                            </td>
                            <td>
                                <a th:href="@{/cart/removeItemFromCart(workingItemId=${cartItem.item.itemId})}"
                                   class="Button">Remove</a>
                            </td>
                        </tr>
<!--                    </c:forEach>-->
                    <tr>
                        <td colspan="7">Sub Total:
                            <span id="subtotal" th:text="${session.cart.subTotal}"></span>



                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </form>
                <a th:if="${session.cart.numberOfCartItems != 0}" th:href="@{/order/NewOrderForm}" class="Button">Proceed to Checkout</a>
        </div>

        <div id="Separator">&nbsp;</div>
    </div>
</div>
<div th:replace="common/Footer :: footer"></div>